
<!-- 登录表单区 -->
<div class="login-box">
  <el-tabs v-model="activeTab" stretch class="login-tabs">
    <el-tab-pane label="账号密码登录" name="account">
      <el-form :model="loginForm" class="login-form">
        <!-- ... existing code ... -->

        <!-- 添加底部背景颜色区域 -->
        <div class="login-footer">
          <div class="social-login">
            <span>第三方登录：</span>
            <a href="#" class="social-icon"><img src="@/assets/icons/alipay.png" alt="支付宝"></a>
            <a href="#" class="social-icon"><img src="@/assets/icons/wechat.png" alt="微信"></a>
            <a href="#" class="social-icon"><img src="@/assets/icons/qq.png" alt="QQ"></a>
            <a href="#" class="social-icon"><img src="@/assets/icons/sina.png" alt="新浪微博"></a>
            <a href="#" class="social-icon"><img src="@/assets/icons/gmail.png" alt="Gmail"></a>
          </div>
        </div>
      </el-form>
    </el-tab-pane>

    <!-- ... existing code ... -->
  </el-tabs>

  <!-- ... existing code ... -->
</div>
